﻿<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
			<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"/>	<title></title>
		<link rel="stylesheet" type="text/css" href="css/jquery-weui.css" />
		<link rel="stylesheet" type="text/css" href="lib/weui.css" />
		<link rel="stylesheet" type="text/css" href="css/demos.css" />
		<style type="text/css">
			.weui-navbar {
				display: block;
				width: 100px;
				background-color: white;
				border-right: 0px;
			}
			
			.weui-navbar .weui-navbar__item {
				width: 100px;
			}
			
			.weui-tab .weui-tab__bd {
				padding-top: 0px;
				margin-left: 100px;
				background-color: #F1F1F1;
			}
			.weui-tab__bd a{
				background-color: white;
			}
		</style>
	</head>

	<body>
		<div class="weui-tab">
			<div class="weui-navbar">
				<a class="weui-navbar__item weui-bar__item--on" href="#tab1">
					坚果炒货
				</a>
				<a class="weui-navbar__item" href="#tab2">
					肉铺鱼干
				</a>
				<a class="weui-navbar__item" href="#tab3">
					果干果铺
				</a>
				<a class="weui-navbar__item" href="#tab4">
					糖点糖果
				</a>
				<a class="weui-navbar__item" href="#tab5">
					素食山珍
				</a>
				<a class="weui-navbar__item" href="#tab6">
					花茶饮品
				</a>
			</div>
			<!--右侧-->
			<div class="weui-tab__bd">
				<!--1-->
				<div id="tab1" class="weui-tab__bd-item weui-tab__bd-item--active">
					<a class="weui-cell weui-cell_access" href="javascript:;">
						<div class="weui-cell__bd">
							<p>三只松鼠</p>
						</div>
						<div class="weui-cell__ft">
						</div>
					</a>
					<a class="weui-cell weui-cell_access" href="javascript:;">
						<div class="weui-cell__bd">
							<p>爆炒坚果</p>
						</div>
						<div class="weui-cell__ft">
						</div>
					</a>
					<a class="weui-cell weui-cell_access" href="javascript:;">
						<div class="weui-cell__bd">
							<p>无壳坚果</p>
						</div>
						<div class="weui-cell__ft">
						</div>
					</a>
					<a class="weui-cell weui-cell_access" href="javascript:;">
						<div class="weui-cell__bd">
							<p>美味干炒</p>
						</div>
						<div class="weui-cell__ft">
						</div>
					</a>
					<a class="weui-cell weui-cell_access" href="javascript:;">
						<div class="weui-cell__bd">
							<p>其他炒货</p>
						</div>
						<div class="weui-cell__ft">
						</div>
					</a>
				</div>
				<div id="tab2" class="weui-tab__bd-item">
					<a class="weui-cell weui-cell_access" href="javascript:;">
						<div class="weui-cell__bd">
							<p>辣口小鱼</p>
						</div>
						<div class="weui-cell__ft">
						</div>
					</a>
					<a class="weui-cell weui-cell_access" href="javascript:;">
						<div class="weui-cell__bd">
							<p>耗牛肉干</p>
						</div>
						<div class="weui-cell__ft">
						</div>
					</a>
					<a class="weui-cell weui-cell_access" href="javascript:;">
						<div class="weui-cell__bd">
							<p>麻辣鸡翅</p>
						</div>
						<div class="weui-cell__ft">
						</div>
					</a>
				</div>
				<div id="tab3" class="weui-tab__bd-item">
					<a class="weui-cell weui-cell_access" href="javascript:;">
						<div class="weui-cell__bd">
							<p>新疆蜜枣</p>
						</div>
						<div class="weui-cell__ft">
						</div>
					</a>
					<a class="weui-cell weui-cell_access" href="javascript:;">
						<div class="weui-cell__bd">
							<p>紫葡萄干</p>
						</div>
						<div class="weui-cell__ft">
						</div>
					</a>
					<a class="weui-cell weui-cell_access" href="javascript:;">
						<div class="weui-cell__bd">
							<p>半个芒果</p>
						</div>
						<div class="weui-cell__ft">
						</div>
					</a>
					<a class="weui-cell weui-cell_access" href="javascript:;">
						<div class="weui-cell__bd">
							<p>富士苹果</p>
						</div>
						<div class="weui-cell__ft">
						</div>
					</a>
				</div>
				<div id="tab4" class="weui-tab__bd-item">
					<a class="weui-cell weui-cell_access" href="javascript:;">
						<div class="weui-cell__bd">
							<p>大白兔</p>
						</div>
						<div class="weui-cell__ft">
						</div>
					</a>
					<a class="weui-cell weui-cell_access" href="javascript:;">
						<div class="weui-cell__bd">
							<p>金丝猴</p>
						</div>
						<div class="weui-cell__ft">
						</div>
					</a>
					<a class="weui-cell weui-cell_access" href="javascript:;">
						<div class="weui-cell__bd">
							<p>其他奶糖</p>
						</div>
						<div class="weui-cell__ft">
						</div>
					</a>
				</div>
				<div id="tab5" class="weui-tab__bd-item">
					<a class="weui-cell weui-cell_access" href="javascript:;">
						<div class="weui-cell__bd">
							<p>冬虫夏草</p>
						</div>
						<div class="weui-cell__ft">
						</div>
					</a>
					<a class="weui-cell weui-cell_access" href="javascript:;">
						<div class="weui-cell__bd">
							<p>龙眼</p>
						</div>
						<div class="weui-cell__ft">
						</div>
					</a>
					<a class="weui-cell weui-cell_access" href="javascript:;">
						<div class="weui-cell__bd">
							<p>野生人参</p>
						</div>
						<div class="weui-cell__ft">
						</div>
					</a>
					<a class="weui-cell weui-cell_access" href="javascript:;">
						<div class="weui-cell__bd">
							<p>灵芝</p>
						</div>
						<div class="weui-cell__ft">
						</div>
					</a>
				</div>
				<div id="tab6" class="weui-tab__bd-item">
					<a class="weui-cell weui-cell_access" href="javascript:;">
						<div class="weui-cell__bd">
							<p>茉莉清茶</p>
						</div>
						<div class="weui-cell__ft">
						</div>
					</a>
					<a class="weui-cell weui-cell_access" href="javascript:;">
						<div class="weui-cell__bd">
							<p>乡间小茶</p>
						</div>
						<div class="weui-cell__ft">
						</div>
					</a>
					<a class="weui-cell weui-cell_access" href="javascript:;">
						<div class="weui-cell__bd">
							<p>可口甜茶</p>
						</div>
						<div class="weui-cell__ft">
						</div>
					</a>
					<a class="weui-cell weui-cell_access" href="javascript:;">
						<div class="weui-cell__bd">
							<p>品牌茶叶</p>
						</div>
						<div class="weui-cell__ft">
						</div>
					</a>
					<a class="weui-cell weui-cell_access" href="javascript:;">
						<div class="weui-cell__bd">
							<p>进口茶叶</p>
						</div>
						<div class="weui-cell__ft">
						</div>
					</a>
				</div>
			</div>
		</div>

		<div class="weui-tabbar">
			<a href="index.html" class="weui-tabbar__item ">
				<div class="weui-tabbar__icon">
					<img src="./images/icon_nav_button.png" alt="">
				</div>
				<p class="weui-tabbar__label">首页</p>
			</a>
			<a href="home2.html" class="weui-tabbar__item weui-bar__item--on">
				<div class="weui-tabbar__icon">
					<img src="./images/icon_nav_msg.png" alt="">
				</div>
				<p class="weui-tabbar__label">分类</p>
			</a>
			<a href="home3.html" class="weui-tabbar__item">
				<div class="weui-tabbar__icon">
					<img src="./images/icon_nav_article.png" alt="">
				</div>
				<p class="weui-tabbar__label">购物车</p>
			</a>
			<a href="home4.html" class="weui-tabbar__item">
				<div class="weui-tabbar__icon">
					<img src="./images/icon_nav_cell.png" alt="">
				</div>
				<p class="weui-tabbar__label">我的良品</p>
			</a>
		</div>
		<!--</div>-->
		<script src="lib/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery-weui.min.js" type="text/javascript" charset="utf-8"></script>
	</body>

</html>